<template>
  <div class="app-container">
    <!-- 密码加密配置卡片 -->
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">密码加密配置</span>
          <div class="card-actions">
            <el-button type="primary" link @click="savePasswordConfig" :loading="saving.password">
              <el-icon>
                <Check />
              </el-icon>保存
            </el-button>
            <el-button link @click="resetPasswordConfig">
              <el-icon>
                <Refresh />
              </el-icon>重置
            </el-button>
          </div>
        </div>
      </template>

      <el-form :model="passwordConfig" label-width="120px" class="config-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="密码加密算法">
              <el-select v-model="passwordConfig.encryptAlgorithm" placeholder="请选择加密算法" style="width: 100%">
                <el-option label="SHA-256（推荐）" value="SHA-256" />
                <el-option label="MD5（不推荐）" value="MD5" />
                <el-option label="SM3（国密）" value="SM3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码加密启用">
              <el-switch v-model="passwordConfig.isEnabled" :active-value="1" :inactive-value="0" active-text="启用"
                inactive-text="禁用" @change="handlePasswordEncryptChange" />
              <div v-if="passwordConfig.isEnabled === 0" class="warning-text">
                <el-icon>
                  <Warning />
                </el-icon>
                禁用密码加密将导致密码明文存储，存在安全风险
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 客户端授权卡片 -->
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">客户端授权</span>
          <div class="card-actions">
            <el-button type="primary" @click="handleAddClient">
              <el-icon>
                <Plus />
              </el-icon>新增客户端
            </el-button>
            <el-button @click="refreshClientList">
              <el-icon>
                <Refresh />
              </el-icon>刷新
            </el-button>
          </div>
        </div>
      </template>

      <el-table :data="clientList" border style="width: 100%" class="client-table">
        <el-table-column prop="clientId" label="客户端ID" align="center" />
        <el-table-column prop="clientName" label="客户端名称" align="center" />
        <el-table-column prop="clientSecret" label="客户端密钥" align="center">
          <template #default="{ row }">
            <span>{{ maskSecret(row.clientSecret) }}</span>
            <el-button type="text" @click="handleShowSecret(row)" style="margin-left: 8px">
              <el-icon>
                <View />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="scope" label="授权范围" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag v-for="scope in getScopeArray(row.scope)" :key="scope" size="small" style="margin: 2px">
              {{ scope }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="有效期" align="center">
          <template #default="{ row }">
            <span>{{ formatDate(row.startTime) }} 至 {{ formatDate(row.endTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="{ row }">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
              @change="handleClientStatusChange(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleEditClient(row)">
              编辑
            </el-button>
            <el-button type="danger" link size="small" @click="handleDeleteClient(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 令牌刷新机制配置卡片 -->
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">令牌刷新机制配置</span>
          <div class="card-actions">
            <el-button type="primary" link @click="saveTokenConfig" :loading="saving.token">
              <el-icon>
                <Check />
              </el-icon>保存
            </el-button>
            <el-button link @click="resetTokenConfig">
              <el-icon>
                <Refresh />
              </el-icon>重置
            </el-button>
          </div>
        </div>
      </template>

      <el-form :model="tokenConfig" label-width="140px" class="config-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="访问令牌过期时间">
              <el-input-number v-model="tokenConfig.accessExpireMinutes" :min="5" :max="1440" controls-position="right"
                style="width: 100%" />
              <div class="form-tip">单位：分钟，最小值5</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="刷新令牌过期时间">
              <el-input-number v-model="tokenConfig.refreshExpireHours" :min="1" :max="720" controls-position="right"
                style="width: 100%" />
              <div class="form-tip">单位：小时，最小值1</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="令牌刷新阈值">
              <el-input-number v-model="tokenConfig.refreshThresholdPct" :min="10" :max="90" controls-position="right"
                style="width: 100%" />
              <div class="form-tip">单位：%，最小值10</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="令牌刷新启用">
              <el-switch v-model="tokenConfig.isEnabled" :active-value="1" :inactive-value="0" active-text="启用"
                inactive-text="禁用" />
              <div class="form-tip">令牌剩余有效期低于阈值时触发刷新</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 验证码配置卡片 -->
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">验证码配置</span>
          <div class="card-actions">
            <el-button type="primary" link @click="saveCaptchaConfig" :loading="saving.captcha">
              <el-icon>
                <Check />
              </el-icon>保存
            </el-button>
            <el-button link @click="resetCaptchaConfig">
              <el-icon>
                <Refresh />
              </el-icon>重置
            </el-button>
            <el-button type="success" @click="handlePreviewCaptcha" :disabled="!captchaConfig.dragEnabled">
              <el-icon>
                <View />
              </el-icon>预览
            </el-button>
          </div>
        </div>
      </template>

      <el-form :model="captchaConfig" label-width="120px" class="config-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="验证码加密方式">
              <el-select v-model="captchaConfig.encryptType" placeholder="请选择加密方式" style="width: 100%">
                <el-option label="Base64" value="Base64" />
                <el-option label="AES" value="AES" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拖动验证码启用">
              <el-switch v-model="captchaConfig.dragEnabled" :active-value="1" :inactive-value="0" active-text="启用"
                inactive-text="禁用" @change="handleCaptchaTypeChange" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="验证码有效时长">
              <el-input-number v-model="captchaConfig.expireSeconds" :min="30" :max="300" controls-position="right"
                style="width: 100%" />
              <div class="form-tip">单位：秒，最小值30</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 客户端新增/编辑对话框 -->
    <el-dialog v-model="clientDialogVisible" :title="clientDialogTitle" width="600px"
      :before-close="handleCloseClientDialog">
      <el-form ref="clientFormRef" :model="clientForm" :rules="clientFormRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="客户端ID" prop="clientId">
              <el-input v-model="clientForm.clientId" placeholder="请输入客户端ID（6-32位字符）"
                :disabled="clientDialogType === 'edit'" maxlength="32" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客户端名称" prop="clientName">
              <el-input v-model="clientForm.clientName" placeholder="请输入客户端名称（2-50位字符）" maxlength="50"
                show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客户端密钥" prop="clientSecret">
              <el-input v-model="clientForm.clientSecret" placeholder="请输入客户端密钥"
                :disabled="clientDialogType === 'edit'">
                <template #append>
                  <el-button @click="generateSecret">生成</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="授权范围" prop="scope">
              <el-checkbox-group v-model="clientForm.scopeArray" style="width: 100%">
                <el-checkbox v-for="scope in scopeOptions" :key="scope.value" :label="scope.value"
                  style="width: 120px; margin-bottom: 8px">
                  {{ scope.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker v-model="clientForm.startTime" type="date" placeholder="选择开始日期"
                value-format="YYYY-MM-DD hh:mm:ss" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker v-model="clientForm.endTime" type="date" placeholder="选择结束日期"
                value-format="YYYY-MM-DD hh:mm:ss" style="width: 100%" :disabled-date="disabledEndDate" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-switch v-model="clientForm.status" :active-value="1" :inactive-value="0" active-text="启用"
                inactive-text="禁用" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <el-button @click="handleCloseClientDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmitClient" :loading="submitting.client">
          {{ clientDialogType === 'add' ? '新增' : '保存' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 验证码预览对话框 -->
    <el-dialog v-model="captchaPreviewVisible" title="验证码预览" width="400px" :before-close="handleCloseCaptchaPreview">
      <div class="captcha-preview">
        <div class="captcha-container">
          <div class="captcha-title">文字验证码预览</div>
          <div class="text-captcha">
            <span class="captcha-code">A1B2C3</span>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="handleCloseCaptchaPreview">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

// API引入
import {
  getAuthConfigList,
  updateAuthConfig,
  getAuthClientList,
  addAuthClient,
  updateAuthClient,
  deleteAuthClient,
  getCaptchaDetail,
  updateCaptchaConfig,
  getTokenConfigDetail,
  updateTokenConfig
} from '@/api/sysManage/authManage'

// 页面数据
const loading = reactive({
  client: false
})

const saving = reactive({
  password: false,
  token: false,
  captcha: false
})

const submitting = reactive({
  client: false
})

// 密码加密配置
const passwordConfig = reactive({
  encryptAlgorithm: 'SHA-256',
  isEnabled: 1
})

// 令牌刷新配置
const tokenConfig = reactive({
  accessExpireMinutes: 30,
  refreshExpireHours: 24,
  refreshThresholdPct: 20,
  isEnabled: 1
})

// 验证码配置
const captchaConfig = reactive({
  encryptType: 'Base64',
  dragEnabled: 1,
  expireSeconds: 120
})

// 客户端列表
const clientList = ref([])

// 客户端对话框控制
const clientDialogVisible = ref(false)
const clientDialogType = ref('add') // add/edit
const clientFormRef = ref()

// 客户端表单数据
const clientForm = reactive({
  clientId: '',
  clientName: '',
  clientSecret: '',
  scopeArray: [],
  startTime: dayjs().format('YYYY-MM-DD'),
  endTime: dayjs().add(1, 'year').format('YYYY-MM-DD'),
  status: 1
})

// 客户端表单验证规则
const clientFormRules = {
  clientId: [
    { required: true, message: '请输入客户端ID', trigger: 'blur' },
    { min: 6, max: 32, message: '客户端ID长度为6-32位字符', trigger: 'blur' }
  ],
  clientName: [
    { required: true, message: '请输入客户端名称', trigger: 'blur' },
    { min: 2, max: 50, message: '客户端名称长度为2-50位字符', trigger: 'blur' }
  ],
  clientSecret: [
    { required: true, message: '请输入客户端密钥', trigger: 'blur' }
  ],
  scopeArray: [
    { required: true, message: '请选择授权范围', trigger: 'change' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ]
}

// 授权范围选项
const scopeOptions = ref([
  { value: 'sys:manage', label: '系统管理' },
  { value: 'sys:view', label: '系统查看' },
  { value: 'user:manage', label: '用户管理' },
  { value: 'user:view', label: '用户查看' },
  { value: 'data:manage', label: '数据管理' },
  { value: 'data:view', label: '数据查看' },
  { value: 'report:manage', label: '报表管理' },
  { value: 'report:view', label: '报表查看' }
])

// 验证码预览对话框
const captchaPreviewVisible = ref(false)

// 计算属性
const clientDialogTitle = computed(() => {
  return clientDialogType.value === 'add' ? '新增客户端' : '编辑客户端'
})

// 初始化数据
onMounted(() => {
  initData()
})

// 初始化数据
const initData = async () => {
  try {
    await Promise.all([
      loadPasswordConfig(),
      loadClientList(),
      loadTokenConfig(),
      loadCaptchaConfig()
    ])
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('初始化数据失败')
  }
}

// 加载密码加密配置
const loadPasswordConfig = async () => {
  try {
    const res = await getAuthConfigList({ configKey: 'password_encrypt' })
    const config = res.rows[0];
    passwordConfig.encryptAlgorithm = config.configValue 
    passwordConfig.isEnabled = config.isEnabled
  } catch (error) {
    console.error('加载密码配置失败:', error)
  }
}

// 加载客户端列表
const loadClientList = async () => {
  try {
    loading.client = true
    const res = await getAuthClientList({})
    clientList.value = res.rows || []
  } catch (error) {
    console.error('加载客户端列表失败:', error)
    ElMessage.error('加载客户端列表失败')
  } finally {
    loading.client = false
  }
}

// 加载令牌配置
const loadTokenConfig = async () => {
  try {
    const res = await getTokenConfigDetail()
    if (res.code === 0 && res.data) {
      Object.assign(tokenConfig, {
        accessExpireMinutes: res.data.accessExpireMinutes || 30,
        refreshExpireHours: res.data.refreshExpireHours || 24,
        refreshThresholdPct: res.data.refreshThresholdPct || 20,
        isEnabled: res.data.isEnabled || 1
      })
    }
  } catch (error) {
    console.error('加载令牌配置失败:', error)
  }
}

// 加载验证码配置
const loadCaptchaConfig = async () => {
  try {
    const res = await getCaptchaDetail()
    if (res.code === 0 && res.data) {
      Object.assign(captchaConfig, {
        encryptType: res.data.encryptType || 'Base64',
        dragEnabled: res.data.dragEnabled || 1,
        expireSeconds: res.data.expireSeconds || 120
      })
    }
  } catch (error) {
    console.error('加载验证码配置失败:', error)
  }
}

// 保存密码配置
const savePasswordConfig = async () => {
  try {
    saving.password = true
    // 这里需要根据实际接口调整
    await updateAuthConfig({
      configKey: 'password_encrypt',
      configValue: passwordConfig.encryptAlgorithm,
      isEnabled: passwordConfig.isEnabled
    })
    ElMessage.success('密码加密配置保存成功')
  } catch (error) {
    console.error('保存密码配置失败:', error)
    ElMessage.error('保存密码配置失败')
  } finally {
    saving.password = false
  }
}

// 重置密码配置
const resetPasswordConfig = () => {
  Object.assign(passwordConfig, {
    encryptAlgorithm: 'SHA-256',
    isEnabled: 1
  })
  ElMessage.success('密码配置已重置')
}

// 密码加密开关变化
const handlePasswordEncryptChange = (value) => {
  if (value === 0) {
    ElMessageBox.confirm(
      '禁用密码加密将导致密码明文存储，存在安全风险，确定要禁用吗？',
      '安全警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).catch(() => {
      passwordConfig.isEnabled = 1
    })
  }
}

// 刷新客户端列表
const refreshClientList = () => {
  loadClientList()
  ElMessage.success('客户端列表已刷新')
}

// 新增客户端
const handleAddClient = () => {
  clientDialogType.value = 'add'
  resetClientForm()
  clientDialogVisible.value = true
}

// 编辑客户端
const handleEditClient = (row) => {
  clientDialogType.value = 'edit'
  Object.assign(clientForm, {
    clientId: row.clientId,
    clientName: row.clientName,
    clientSecret: row.clientSecret,
    scopeArray: getScopeArray(row.scope),
    startTime: row.startTime,
    endTime: row.endTime,
    status: row.status
  })
  clientDialogVisible.value = true
}

// 删除客户端
const handleDeleteClient = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除客户端 "${row.clientName}" 吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await deleteAuthClient(row.clientId)
    ElMessage.success('客户端删除成功')
    loadClientList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除客户端失败:', error)
      ElMessage.error('删除客户端失败')
    }
  }
}

// 客户端状态变化
const handleClientStatusChange = async (row) => {
  try {
    await updateAuthClient({
      clientId: row.clientId,
      status: row.status
    })
    ElMessage.success('客户端状态更新成功')
  } catch (error) {
    console.error('更新客户端状态失败:', error)
    ElMessage.error('更新客户端状态失败')
    // 恢复原状态
    row.status = row.status === 1 ? 0 : 1
  }
}

// 显示密钥
const handleShowSecret = (row) => {
  ElMessageBox.alert(row.clientSecret, '客户端密钥', {
    confirmButtonText: '确定',
    customClass: 'secret-dialog'
  })
}

// 重置客户端表单
const resetClientForm = () => {
  Object.assign(clientForm, {
    clientId: '',
    clientName: '',
    clientSecret: '',
    scopeArray: [],
    startTime: dayjs().format('YYYY-MM-DD'),
    endTime: dayjs().add(1, 'year').format('YYYY-MM-DD'),
    status: 1
  })
  if (clientFormRef.value) {
    clientFormRef.value.clearValidate()
  }
}

// 关闭客户端对话框
const handleCloseClientDialog = () => {
  clientDialogVisible.value = false
  resetClientForm()
}

// 生成密钥
const generateSecret = () => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  let secret = ''
  for (let i = 0; i < 32; i++) {
    secret += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  clientForm.clientSecret = secret
}

// 提交客户端表单
const handleSubmitClient = async () => {
  if (!clientFormRef.value) return

  try {
    await clientFormRef.value.validate()
    submitting.client = true

    const formData = {
      ...clientForm,
      scope: clientForm.scopeArray.join(',')
    }

    if (clientDialogType.value === 'add') {
      await addAuthClient(formData)
      ElMessage.success('客户端新增成功')
    } else {
      await updateAuthClient(formData)
      ElMessage.success('客户端更新成功')
    }

    clientDialogVisible.value = false
    loadClientList()
  } catch (error) {
    console.error('操作失败:', error)
    if (error.errors) {
      return
    }
    ElMessage.error('操作失败')
  } finally {
    submitting.client = false
  }
}

// 保存令牌配置
const saveTokenConfig = async () => {
  try {
    saving.token = true
    await updateTokenConfig(tokenConfig)
    ElMessage.success('令牌配置保存成功')
  } catch (error) {
    console.error('保存令牌配置失败:', error)
    ElMessage.error('保存令牌配置失败')
  } finally {
    saving.token = false
  }
}

// 重置令牌配置
const resetTokenConfig = () => {
  Object.assign(tokenConfig, {
    accessExpireMinutes: 30,
    refreshExpireHours: 24,
    refreshThresholdPct: 20,
    isEnabled: 1
  })
  ElMessage.info('令牌配置已重置')
}

// 保存验证码配置
const saveCaptchaConfig = async () => {
  try {
    saving.captcha = true
    await updateCaptchaConfig(captchaConfig)
    ElMessage.success('验证码配置保存成功')
  } catch (error) {
    console.error('保存验证码配置失败:', error)
    ElMessage.error('保存验证码配置失败')
  } finally {
    saving.captcha = false
  }
}

// 重置验证码配置
const resetCaptchaConfig = () => {
  Object.assign(captchaConfig, {
    encryptType: 'Base64',
    dragEnabled: 1,
    expireSeconds: 120
  })
  ElMessage.success('验证码配置已重置')
}

// 验证码类型变化
const handleCaptchaTypeChange = (value) => {
  if (value === 0) {
    ElMessage.success('已切换为文字验证码模式')
  } else {
    ElMessage.success('已切换为拖动验证码模式')
  }
}

// 预览验证码
const handlePreviewCaptcha = () => {
  captchaPreviewVisible.value = true
}

// 关闭验证码预览
const handleCloseCaptchaPreview = () => {
  captchaPreviewVisible.value = false
}


// 工具函数
const maskSecret = (secret) => {
  if (!secret) return ''
  return secret.substring(0, 8) + '***' + secret.substring(secret.length - 8)
}

const getScopeArray = (scope) => {
  if (!scope) return []
  return scope.split(',').filter(s => s.trim())
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  try {
    return dayjs(dateString).format('YYYY-MM-DD')
  } catch {
    return dateString
  }
}

const disabledEndDate = (time) => {
  if (!clientForm.startTime) return false
  return time < dayjs(clientForm.startTime).valueOf()
}
</script>

<style scoped lang="scss">
.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.config-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: none;

  &:last-child {
    margin-bottom: 0;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.config-form {
  padding: 20px;
}

.client-table {
  margin-top: 0;
}

.empty-table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.warning-text {
  color: #e6a23c;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}

.captcha-preview {
  text-align: center;
  padding: 20px 0;
}

.captcha-container {
  max-width: 300px;
  margin: 0 auto;
}

.captcha-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #303133;
}

.captcha-slider {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 20px;
}

.slider-track {
  width: 100%;
  height: 40px;
  background: #e4e7ed;
  border-radius: 20px;
  position: relative;
  margin-bottom: 10px;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-text {
  color: #606266;
  font-size: 14px;
}

.text-captcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.captcha-code {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  letter-spacing: 2px;
  background: #f0f2f5;
  padding: 8px 16px;
  border-radius: 4px;
}

.refresh-btn {
  color: #409eff;
}

.captcha-input {
  width: 200px;
  margin: 0 auto;
}

:deep(.el-card__header) {
  padding: 0;
}

:deep(.el-table) {
  .cell {
    white-space: nowrap;
  }

  th {
    background: #f5f7fa;
  }
}

:deep(.secret-dialog) {
  .el-message-box__message {
    word-break: break-all;
    font-family: monospace;
    background: #f5f7fa;
    padding: 10px;
    border-radius: 4px;
  }
}

</style>